<template>
  <div class="component-wrap">
    <div v-show="groupLen === 0" class="tip">请添加视频素材</div>
    <div v-show="groupLen > 0" ref="videoRef" :style="videoWrapStyle">
      <video :id="videoId" ref="livePlayer" :style="videoStyle" controls>
        <track default label="" crossorigin="anonymous" kind="captions" />
      </video>
    </div>
    <ShowBorder v-if="borderShow" :border-attrs="borderAttrs" />
  </div>
</template>

<script>
import videojs from 'video.js'
import 'video.js/dist/video-js.css'
import { ROATATION_TYPE } from '@/utils/constant'
import ShowBorder from '@/components/Editor/ShowBorder.vue'
import { borderAttr } from '@/custom-component/component-list'
import { pick } from 'lodash'

export default {
  name: 'VideoComponent',
  components: { ShowBorder },
  props: {
    element: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      videoJs: null,
      currentVideoIndex: 0,
    }
  },
  computed: {
    groupLen() {
      return this.element.srcGroup.length
    },
    videoId() {
      return `video-${this.element.id}`
    },
    videoStyle() {
      const { width, height } = this.element

      return {
        width: `${width}px`,
        height: `${height}px`,
      }
    },
    playVideoLists() {
      return this.element.srcGroup.map((item) => ({
        type: 'video/mp4',
        src: item.src,
      }))
    },
    videoWrapStyle() {
      const { rotation = 0, width, height } = this.element

      return {
        width: `${width}px`,
        height: `${height}px`,
        transform: `rotate(${ROATATION_TYPE[Number(rotation)]}deg)`,
      }
    },
    borderAttrs() {
      const attrs = Object.keys(borderAttr)
      return pick(this.element, [...attrs, 'width', 'height', 'id'])
    },
    borderShow() {
      return Number(this.element?.borderSW) === 1
    },
  },
  watch: {
    'element.srcGroup': function (val) {
      console.log('val', val, this.videoJs)
      this.$nextTick(() => {
        if (val.length) {
          if (this.videoJs) {
            this.updateAndPlayNext()
          } else {
            this.playVideo()
          }
        } else {
          this.pause()
        }
      })
    },
    'element.videoVolumeSW': function (val) {
      this.videoJs && this.videoJs.muted(!val)
    },
  },
  mounted() {
    this.playVideo()
  },
  beforeDestroy() {
    this.videoJs && this.videoJs.dispose()
    this.videoJs = null
  },
  methods: {
    playVideo() {
      if (this.$refs.videoRef && this.groupLen) {
        this.videoJs = videojs(this.videoId, {
          autoplay: true,
          controls: false,
          preload: 'auto',
          sources: [this.playVideoLists[this.currentVideoIndex]],
        })
        // 根据 `videoVolumeSW` 设置静音状态
        this.videoJs.muted(!this.element.videoVolumeSW)

        this.videoJs.on('ended', () => {
          this.playNextVideo()
        })
        this.videoJs.on('error', () => {
          this.playNextVideo()
        })
      }
    },
    playNextVideo() {
      this.currentVideoIndex = (this.currentVideoIndex + 1) % this.playVideoLists.length
      this.updateAndPlayNext()
    },
    updateAndPlayNext() {
      if (this.videoJs) {
        this.videoJs.src(this.playVideoLists[this.currentVideoIndex])
        this.videoJs.load()
        this.videoJs.play()
      }
    },
    pause() {
      this.videoJs && this.videoJs.pause()
    },
  },
}
</script>
<style lang="scss" scoped></style>
